<script lang="ts">
import {Vue, Component, Prop, Inject, Watch} from 'vue-property-decorator';
import {ApplyInfoProps} from "./types";
import {auditType} from "../ModalContent/types";
import {CommodityDetail, CommodityDetailDto, CommodityReviewItem} from "../../plugins/dto";
import {BusinessType} from "../../../MasterDataModal/type";

@Component({name: "ApplyInfo"})
export default class ApplyInfo extends Vue implements ApplyInfoProps {
  @Prop({default: ""}) applyType!: "add" | "edit";

  appInfoData:Pick<CommodityReviewItem, "sourceTenantName" | "createdTime" | "remark"> = Vue.observable({
      sourceTenantName: "",
      createdTime: "",
      remark: ""
  })

  @Inject("auditType")
  injectedAuditType!: auditType

  @Inject('modeType') injectedModeType!: {mode: string};

  // @Inject("CommodityDetail")
  // providedCommodityDetail!: CommodityReviewItem

  @Inject("ApplyInfo")
  providedApplyInfo!:any

  @Inject("businessType")
  providedBusinessType!:BusinessType
  
  @Watch("providedApplyInfo", {immediate: true, deep:true})
  commodityDetailChange(newValue:CommodityDetailDto["applyInfo"]){
    this.appInfoData.sourceTenantName = newValue.sourceTenantName
    this.appInfoData.createdTime = newValue.createdTime
    if(this.providedBusinessType.businessType === "commodity"){
      this.appInfoData.remark = newValue.batchApplyNo
    }else{
      this.appInfoData.remark = newValue.remark
    }
  }
}
</script>



<template>
  <div>
      <div class="cc-apply-info-item">
        <div class="cc-apply-info-title">申请类型：</div>
        <el-button type="text" :disabled="injectedModeType.mode == 'preview'">
          {{injectedAuditType.auditType == 'add' ? '新增' : '变更'}}
        </el-button>
      </div>
      <div class="cc-apply-info-item">
        <div class="cc-apply-info-title">申请公司：</div>
        <div class="cc-apply-info-content">
          {{appInfoData.sourceTenantName}}
        </div>
      </div>
      <div class="cc-apply-info-item">
        <div class="cc-apply-info-title">申请时间：</div>
        <div class="cc-apply-info-content">
          {{appInfoData.createdTime}}
        </div>
      </div>
      <div class="cc-apply-info-item" v-if="providedBusinessType.businessType =='commodity'">
        <div class="cc-apply-info-title">申请说明：</div>
        <div class="cc-apply-info-content">
          {{appInfoData.remark}}
          <el-tooltip></el-tooltip>
        </div>
      </div>
  </div>
</template>

<style scoped lang="scss">
.cc-apply-info-item{
  display: flex;
  align-items: flex-start;
  padding: 5px 0px;
  .cc-apply-info-content{
    text-align: left;
    max-width: 220px;
  }
}
.cc-apply-info-title{
  flex-shrink: 0
}
::v-deep .el-button{
  padding: 0;
}
::v-deep .el-button--primary.is-plain{
  padding: 5px;
  position: relative;
  top: -3px;
}
::v-deep .el-button--text{
  line-height: 24px;
}
</style>